<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <title>2.0-平台收入可视化界面</title>
    <link rel="stylesheet" href="styles/bootstrap/bootstrap.css">
    <link rel="stylesheet" href="styles/bootstrap-table.css">
    <link rel="stylesheet" href="lib/layui/css/layui.css">
    <link rel="stylesheet" href="styles/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="styles/awesome/font-awesome.min.css">
    <link rel="stylesheet" href="styles/reset.css">
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="styles/cy.css">
    <link rel="stylesheet" href="styles/qd.css">
    <link rel="stylesheet" href="styles/sfy_nav.css">

</head>

<body>
    <!--头部-->
    <div class="g_header">
        <div class="g_hea_g1">
            <div class="g_hea_g2">
                <span class="g_hea_img1" id="trigger-overlay">
                    <!-- <img src="images/logo_yly.png" class="img_1 fl">
                    <img src="images/icon-menu.png" class="menu fl"> -->
                </span>

                <div class="g_hea_login">管理员管理员,欢迎您登陆
                    <span></span>
                    <div class="userboxinfo userboxinfob">
                        <ul class="ul_userlist">
                            <li>
                                <a href="/updatePwd">修改密码</a>
                            </li>
                            <li>
                                <a href="/logout">退出</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="g_hear">
                    <a href="#">
                        <img src="images/icon_home.png">首页</a>
                    <a href="#">
                        <img src="images/sf1_07.png">传链社区</a>
                    <a href="#">
                        <img src="images/sf1_09.png">服务中心</a>
                    <a href="message.html">
                        <i>22</i>消息</a>
                </div>
            </div>
        </div>
        <div class="overlay overlay-genie " data-steps="m 701.56545,809.01175 35.16718,0 0,19.68384 -35.16718,0 z;m 698.9986,728.03569 41.23353,0 -3.41953,77.8735 -34.98557,0 z;m 687.08153,513.78234 53.1506,0 C 738.0505,683.9161 737.86917,503.34193 737.27015,806 l -35.90067,0 c -7.82727,-276.34892 -2.06916,-72.79261 -14.28795,-292.21766 z;m 403.87105,257.94772 566.31246,2.93091 C 923.38284,513.78233 738.73561,372.23931 737.27015,806 l -35.90067,0 C 701.32034,404.49318 455.17312,480.07689 403.87105,257.94772 z;M 51.871052,165.94772 1362.1835,168.87863 C 1171.3828,653.78233 738.73561,372.23931 737.27015,806 l -35.90067,0 C 701.32034,404.49318 31.173122,513.78234 51.871052,165.94772 z;m 52,26 1364,4 c -12.8007,666.9037 -273.2644,483.78234 -322.7299,776 l -633.90062,0 C 359.32034,432.49318 -6.6979288,733.83462 52,26 z;m 0,0 1439.999975,0 0,805.99999 -1439.999975,0 z"
            id="g_hea_con">
            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1440 806" preserveAspectRatio="none" class="svg1">
                <path class="overlay-path" d="m 701.56545,809.01175 35.16718,0 0,19.68384 -35.16718,0 z" />
            </svg>
            <ul class="g_hea_ul">
                <li class="li1">System Management</li>
                <li class="li2">基础资料</li>
                <li class="li3">耗材管理</li>
                <li class="li4">科室管理</li>
                <li class="li5">财务管理</li>
                <li class="li6">统计查询</li>
            </ul>
            <div class="g_hea_ulbox">
                <div class="g_hea_tab">
                    <ul class="g_hea_ul2">
                        <li>系统配置</li>
                        <li>权限管理</li>
                        <li>日常维护</li>
                        <li>待办事宜</li>
                        <li>自定表格</li>
                        <li>辅助功能</li>
                        <li>数据维护</li>
                    </ul>
                    <div class="g_hea_tab2">
                        <p>
                            <a href="sfy_nav.html" class="g_hea_a1">用户参数设置1</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1 active">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                        </p>
                        <p>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                        </p>
                    </div>
                    <div class="g_hea_tab2">
                        <p>
                            <a href="" class="g_hea_a1">用户参数设置2</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                        </p>
                        <p>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                        </p>
                    </div>
                    <div class="g_hea_tab2">
                        <p>
                            <a href="" class="g_hea_a1">用户参数设置3</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                        </p>
                        <p>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                        </p>
                    </div>
                    <div class="g_hea_tab2">
                        <p>
                            <a href="" class="g_hea_a1">用户参数设置4</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                        </p>
                        <p>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                        </p>
                    </div>
                    <div class="g_hea_tab2">
                        <p>
                            <a href="" class="g_hea_a1">用户参数设置5</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                        </p>
                        <p>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                        </p>
                    </div>
                    <div class="g_hea_tab2">
                        <p>
                            <a href="" class="g_hea_a1">用户参数设置6</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                        </p>
                        <p>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                        </p>
                    </div>
                    <div class="g_hea_tab2">
                        <p>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                        </p>
                        <p>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                        </p>
                    </div>
                </div>
                <div class="g_hea_tab">
                    <ul class="g_hea_ul2">
                        <li class="">系统配置</li>
                        <li>权限管理</li>
                        <li>日常维护</li>
                        <li>待办事宜</li>
                        <li>自定表格</li>
                        <li>辅助功能</li>
                        <li>数据维护</li>
                    </ul>
                    <div class="g_hea_tab2">
                        <p>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                        </p>
                        <p>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                        </p>
                    </div>
                </div>
                <div class="g_hea_tab">
                    <ul class="g_hea_ul2">
                        <li class="">系统配置</li>
                        <li>权限管理</li>
                        <li>日常维护</li>
                        <li>待办事宜</li>
                        <li>自定表格</li>
                        <li>辅助功能</li>
                        <li>数据维护</li>
                    </ul>
                    <div class="g_hea_tab2">
                        <p>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                        </p>
                        <p>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                        </p>
                    </div>
                </div>
                <div class="g_hea_tab">
                    <ul class="g_hea_ul2">
                        <li class="">系统配置</li>
                        <li>权限管理</li>
                        <li>日常维护</li>
                        <li>待办事宜</li>
                        <li>自定表格</li>
                        <li>辅助功能</li>
                        <li>数据维护</li>
                    </ul>
                    <div class="g_hea_tab2">
                        <p>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                        </p>
                        <p>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                        </p>
                    </div>
                </div>
                <div class="g_hea_tab">
                    <ul class="g_hea_ul2">
                        <li class="">系统配置</li>
                        <li>权限管理</li>
                        <li>日常维护</li>
                        <li>待办事宜</li>
                        <li>自定表格</li>
                        <li>辅助功能</li>
                        <li>数据维护</li>
                    </ul>
                    <div class="g_hea_tab2">
                        <p>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                        </p>
                        <p>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                        </p>
                    </div>
                </div>
                <div class="g_hea_tab">
                    <ul class="g_hea_ul2">
                        <li class="">系统配置</li>
                        <li>权限管理</li>
                        <li>日常维护</li>
                        <li>待办事宜</li>
                        <li>自定表格</li>
                        <li>辅助功能</li>
                        <li>数据维护</li>
                    </ul>
                    <div class="g_hea_tab2">
                        <p>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                        </p>
                        <p>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                            <a href="" class="g_hea_a1">用户参数设置</a>
                        </p>
                    </div>
                </div>
            </div>
            <img src="images/cross.png" class="g_hea_close">
        </div>
    </div>

    <!-- 按钮 当前位置-->
    <!-- <div class="g_header_nav">
        <div class="g_header_t">
            <div class="operate-btns">
                <a href="javascript:void(0)" class="fbtn fb-receive">接收</a>
            </div>
        </div>
        <div class="con_breadcrumb">
            <ol class="breadcrumb">
                <li>
                    <a href="#">收货确认</a>
                </li>
            </ol>
            <h3 class="current_module">收货确认</h3>
        </div>
    </div> -->
    <!--end  按钮 当前位置-->
    <!-- 收入可视化标题 -->
    <div class="view-tit">
        <p>传世药链云流量收入看板
            <span id="Years">2017年10月</span>
        </p>
    </div>
    <!-- 收入可视化标题 end -->
    <!-- 流程图-->
    <p class="g_hea_p3">
        <label class="switch_largeb">
            <input type="checkbox">
            <span></span>
        </label>
        <span>关闭流程图</span>
    </p>
    <div class="g_He_bx">
        <dl class="flow_link">
            <dt>物流商流程</dt>
            <dd class="active">
                <span>物流订单接受</span>
            </dd>
            <dd>
                <span>集单</span>
            </dd>
            <dd>
                <span>订单调度</span>
            </dd>
            <dd>
                <span>仓储安排</span>
            </dd>
            <dd>
                <span>运输安排</span>
            </dd>
            <dd>
                <span>物流订单分发</span>
            </dd>
        </dl>
    </div>
    <!-- end流程图-->
    <!--end头部-->
    <!-- 平台收入可视化界面 -->
    <div class="content">
        <div class="view-con">
            <!-- 当日收入 -->
            <div class="left-plate">
                <div class="view-tit2">
                    <p>当日收入</p>
                </div>
                <div class="today-view">
                    <div class="daily-plate" id="Daily1"></div>
                    <div class="daily-plate" id="Daily2"></div>
                    <div class="daily-plate" id="Daily3"></div>
                </div>
            </div>
            <!-- 当日收入 end -->
            <!-- 月收入环比 -->
            <div class="right-plate">
                <div class="view-tit2">
                    <p>月收入环比</p>
                </div>
                <div class="monthly-chart" id="Monthly"></div>
                <div class="view-tit2">
                    <p>2017年累计流量收入贡献前五名</p>
                </div>
                <table class="table table-view table-no-bordered">
                    <tbody>
                        <tr>
                            <td>
                                <i>1.</i> 修正药业集团</td>
                            <td>
                                <b>322.4</b> 万元</td>
                        </tr>
                        <tr>
                            <td>
                                <i>2.</i> 北京嘉事嘉和公司</td>
                            <td>
                                <b>231.7</b> 万元</td>
                        </tr>
                        <tr>
                            <td>
                                <i>3.</i> 北京叉叉叉和公司</td>
                            <td>
                                <b>139.2</b> 万元</td>
                        </tr>
                        <tr>
                            <td>4. 江苏叉叉公司</td>
                            <td>
                                <b>104.4</b> 万元</td>
                        </tr>
                        <tr>
                            <td>5. 武汉叉叉公司</td>
                            <td>
                                <b>98.8</b> 万元</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <!-- 月收入环比 end -->
            <!-- 中间圆形布局 -->
            <div class="line-box">
                <div class="num-round" id="box">
                    <!-- <div class="line rotate1"><span class="day"><em class="num">1</em></span></div> -->
                    <div class="line-years">
                        <span id="Year">2017</span>
                        <span id="Month">10月</span>
                    </div>
                </div>
                <div class="full-round big-round"></div>
                <div class="full-round small-round"></div>
                <div class="middle-plate">
                    <div class="view-tit2">
                        <p>当前月流量收前
                            <b>10</b>名</p>
                    </div>
                    <table class="table table-view">
                        <tbody>
                            <tr>
                                <td>
                                    <i>1.</i> 修正药业集团</td>
                                <td>
                                    <b>22.2</b> 万元</td>
                            </tr>
                            <tr>
                                <td>
                                    <i>2.</i> 北京嘉事嘉和公司</td>
                                <td>
                                    <b>15.3</b> 万元</td>
                            </tr>
                            <tr>
                                <td>
                                    <i>3.</i> 北京叉叉叉和公司</td>
                                <td>
                                    <b>13.2</b> 万元</td>
                            </tr>
                            <tr>
                                <td>4. 江苏叉叉公司</td>
                                <td>
                                    <b>12.9</b> 万元</td>
                            </tr>
                            <tr>
                                <td>5. 武汉叉叉公司</td>
                                <td>
                                    <b>8.4</b> 万元</td>
                            </tr>
                            <tr>
                                <td>6. 河南叉叉公司</td>
                                <td>
                                    <b>7.8</b> 万元</td>
                            </tr>
                            <tr>
                                <td>7. 云南叉叉公司</td>
                                <td>
                                    <b>6.6</b> 万元</td>
                            </tr>
                            <tr>
                                <td>8. 陕西叉叉公司</td>
                                <td>
                                    <b>5.1</b> 万元</td>
                            </tr>
                            <tr>
                                <td>9. 山东叉叉公司</td>
                                <td>
                                    <b>3.4</b> 万元</td>
                            </tr>
                            <tr>
                                <td>10. 山西叉叉公司</td>
                                <td>
                                    <b>1.2</b> 万元</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- 中间圆形布局 end -->

        </div>
    </div>
    <!-- 平台收入可视化界面 end -->

    <footer class="footer">
        <p>
            Copyright © 2015-2017
            <a href="http://www.miitbeian.gov.cn/state/outPortal/loginPortal.action" target="_blank">粤ICP备16033858-1</a> 深圳传世般若科技有限公司
        </p>
    </footer>
    <script type="text/javascript" src="lib/jquery.min.js"></script>
    <script type="text/javascript" src="lib/underscore-min.js"></script>
    <script type="text/javascript" src="lib/layui/lay/dest/layui.all.js"></script>
    <script type="text/javascript" src="lib/bootstrap.min.js"></script>
    <script type="text/javascript" src="lib/bootstrap-table.js"></script>
    <script type="text/javascript" src="lib/jquery.validate.min.js"></script>
    <script type="text/javascript" src="lib/city-picker.js"></script>
    <script type="text/javascript" src="lib/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript" src="lib/jquery.slimscroll.js"></script>
    <script type="text/javascript" src="lib/echarts-all.js"></script>
    <script type="text/javascript" src="lib/flot/jquery.flot.js"></script>
    <script type="text/javascript" src="lib/zUI.js"></script>
    <!--新导航-->
    <script type="text/javascript" src="lib/snap.svg-min.js"></script>
    <script type="text/javascript" src="lib/modernizr.custom.js"></script>
    <script type="text/javascript" src="js/header_sfy.js"></script>
    <!--end新导航-->
    <script type="text/javascript" src="lib/paging.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
    <script type="text/javascript" src="js/validate-demo.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <script type="text/javascript" src="js/cy.js"></script>
    <script>
        $(function () {
            // var nav = true;
            // $(".g_hea_img1").on('click', function() {
            //     if(nav){
            //         $(this).parent().parent().parent().find('.overlay').addClass('open');
            //         $(this).addClass('current');
            //         nav = false
            //     } else{
            //         $(this).parent().parent().parent().find('.overlay').removeClass('open');
            //         $(this).removeClass('current');
            //         nav = true
            //     }
            // });

            //获取当月的天数
            function getDays() {
                //构造当前日期对象
                var date = new Date();
                //获取年份
                var year = date.getFullYear();
                //获取当前月份
                var mouth = date.getMonth() + 1;
                $('#Years').html(year + '年' + mouth + '月');
                $('#Year').html(year);
                $('#Month').html(mouth + '月');
                //定义当月的天数；
                var days;
                //当月份为二月时，根据闰年还是非闰年判断天数
                if (mouth == 2) {
                    days = year % 4 == 0 ? 29 : 28;
                } else if (mouth == 1 || mouth == 3 || mouth == 5 || mouth == 7 || mouth == 8 || mouth == 10 || mouth == 12) {
                    //月份为：1,3,5,7,8,10,12 时，为大月.则天数为31；
                    days = 31;
                } else {
                    //其他月份，天数为：30.
                    days = 30;
                };
                //输出天数
                return days;
            }

            var newDay = new Date();
            var curDay = newDay.getDate();    //当前号数
            var dateNum = getDays();    //当月总天数
            var s = -15;    //旋转角度起始值
            var mult = 3.5;   //旋转的倍数
            // console.log(dateNum);
            for (var i = 0; i < dateNum; i++) {
                var htmls = '<div class="day-line"><span class="day"><em class="nums">' + (i + 1) + '</em></span></div>'
                $("#box").append(htmls);
                $("#box .day-line").eq(i).css("webkitTransform", "rotate(" + s * mult + "deg)");
                $("#box .day-line").eq(i).css("transform", "rotate(" + s * mult + "deg)");
                if ((i + 1) == curDay) {
                    $("#box .day-line").eq(i).addClass('cur');
                    var ws = mult * (-s);
                    var stylestr = '<style>.day-line.cur:before{transform:rotate(' + ws + 'deg)}</style>';
                    $("#box").append(stylestr)
                }
                s++;
            };

            // 日收入环比 
            var myChart1 = echarts.init(document.getElementById('Daily1'));
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'none'
                    },
                    show: false
                },
                grid: {
                    x: 40,    // 距左边距离
                    y: 30,    // 距上边距离
                    x2: 5,    // 距右边距离
                    y2: 30,    // 距下边距离
                    borderWidth: 1
                },
                yAxis: {
                    type: 'value',
                    name: '万元',
                    splitNumber: 3,
                    axisLabel: {
                        formatter: '{value}'
                    },
                    axisLine: {            // 坐标轴线
                        show: true,        // 默认显示，属性show控制显示与否
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: '#00aaeb',
                            width: 1,
                            type: 'solid'
                        }
                    },
                    splitLine: {           // 分隔线
                        show: true,        // 默认显示，属性show控制显示与否
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            color: ['#00aaeb'],
                            width: 1,
                            type: 'solid'
                        }
                    },
                },
                xAxis: {
                    type: 'category',
                    inverse: true,
                    data: ['预估收入'],
                    axisLabel: {
                        margin: 10,
                        textStyle: {
                            fontSize: 12
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        show: false,       // 属性show控制显示与否，默认不显示
                    },
                    axisLine: {            // 坐标轴线
                        show: false,        // 默认显示，属性show控制显示与否
                    },
                    splitLine: {           // 分隔线
                        show: false,        // 默认显示，属性show控制显示与否
                    },
                    splitArea: {           // 分隔区域
                        show: true,       // 默认不显示，属性show控制显示与否
                        areaStyle: {       // 属性areaStyle（详见areaStyle）控制区域样式
                            color: ['rgba(0,170,235,0.1)']
                        }
                    }
                },
                series: [
                    {
                        data: ['95'],
                        name: '预估收入',
                        type: 'bar',
                        barWidth: 50,
                        itemStyle: {
                            normal: {
                                color: '#00aaeb',
                                // barBorderColor: 'red',       // 柱条边线
                                // barBorderRadius: 0,           // 柱条边线圆角，单位px，默认为0
                                // barBorderWidth: 1,            // 柱条边线线宽，单位px，默认为1
                                label: {
                                    show: true,
                                    position: 'insideTop',
                                    color: '#fff'
                                }
                            },
                        }
                    }
                ]
            };
            myChart1.setOption(option);

            var myChart2 = echarts.init(document.getElementById('Daily2'));
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'none'  // 默认为直线，可选为：'line' | 'shadow'
                    },
                    show: false
                },
                grid: {
                    x: 40,    // 距左边距离
                    y: 30,    // 距上边距离
                    x2: 5,    // 距右边距离
                    y2: 30,    // 距下边距离
                    borderWidth: 1
                },
                yAxis: {
                    type: 'value',
                    name: '货量（万件）',
                    splitNumber: 3,
                    axisLabel: {
                        formatter: '{value}'
                    },
                    axisLine: {            // 坐标轴线
                        show: true,        // 默认显示，属性show控制显示与否
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: '#ee7a2f',
                            width: 1,
                            type: 'solid'
                        }
                    },
                    splitLine: {           // 分隔线
                        show: true,        // 默认显示，属性show控制显示与否
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            color: ['#ee7a2f'],
                            width: 1,
                            type: 'solid'
                        }
                    },
                },
                xAxis: {
                    type: 'category',
                    inverse: true,
                    data: ['收入依据'],
                    axisLabel: {
                        margin: 10,
                        textStyle: {
                            fontSize: 12
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        show: false,       // 属性show控制显示与否，默认不显示
                    },
                    axisLine: {            // 坐标轴线
                        show: false,        // 默认显示，属性show控制显示与否
                    },
                    splitLine: {           // 分隔线
                        show: false,        // 默认显示，属性show控制显示与否
                    },
                    splitArea: {           // 分隔区域
                        show: true,       // 默认不显示，属性show控制显示与否
                        areaStyle: {       // 属性areaStyle（详见areaStyle）控制区域样式
                            color: ['rgba(238,122,47,0.1)']
                        }
                    }
                },
                series: [
                    {
                        data: ['98'],
                        name: '收入依据',
                        type: 'bar',
                        barWidth: 50,
                        itemStyle: {
                            normal: {
                                color: '#ee7a2f',
                                // barBorderColor: 'red',       // 柱条边线
                                // barBorderRadius: 0,           // 柱条边线圆角，单位px，默认为0
                                // barBorderWidth: 1,            // 柱条边线线宽，单位px，默认为1
                                label: {
                                    show: true,
                                    position: 'insideTop',
                                    color: '#fff'
                                }
                            },
                        }
                    }
                ]
            };
            myChart2.setOption(option);

            var myChart3 = echarts.init(document.getElementById('Daily3'));
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'none'
                    },
                    show: false
                },
                grid: {
                    x: 40,    // 距左边距离
                    y: 30,    // 距上边距离
                    x2: 5,    // 距右边距离
                    y2: 30,    // 距下边距离
                    borderWidth: 1
                },
                yAxis: {
                    type: 'value',
                    name: '单量（万单）',
                    splitNumber: 3,
                    axisLabel: {
                        formatter: '{value}'
                    },
                    axisLine: {            // 坐标轴线
                        show: true,        // 默认显示，属性show控制显示与否
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: '#46b036',
                            width: 1,
                            type: 'solid'
                        }
                    },
                    splitLine: {           // 分隔线
                        show: true,        // 默认显示，属性show控制显示与否
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            color: ['#46b036'],
                            width: 1,
                            type: 'solid'
                        }
                    },
                },
                xAxis: {
                    type: 'category',
                    inverse: true,
                    data: ['收入依据'],
                    axisLabel: {
                        margin: 10,
                        textStyle: {
                            fontSize: 12
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        show: false,       // 属性show控制显示与否，默认不显示
                    },
                    axisLine: {            // 坐标轴线
                        show: false,        // 默认显示，属性show控制显示与否
                    },
                    splitLine: {           // 分隔线
                        show: false,        // 默认显示，属性show控制显示与否
                    },
                    splitArea: {           // 分隔区域
                        show: true,       // 默认不显示，属性show控制显示与否
                        areaStyle: {       // 属性areaStyle（详见areaStyle）控制区域样式
                            color: ['rgba(70,176,54,0.1)']
                        }
                    }
                },
                series: [
                    {
                        data: ['28'],
                        name: '收入依据',
                        type: 'bar',
                        barWidth: 50,
                        itemStyle: {
                            normal: {
                                color: '#46b036',
                                // barBorderColor: 'red',       // 柱条边线
                                // barBorderRadius: 0,           // 柱条边线圆角，单位px，默认为0
                                // barBorderWidth: 1,            // 柱条边线线宽，单位px，默认为1
                                label: {
                                    show: true,
                                    position: 'insideTop',
                                    color: '#fff'
                                }
                            },
                        }
                    }
                ]
            };
            myChart3.setOption(option);

            // 月收入环比 
            var myChart4 = echarts.init(document.getElementById('Monthly'));
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'none'
                    },
                    formatter: '{b} <br /> {a} : {c}万'
                },
                grid: {
                    x: 0,    // 距左边距离
                    y: 30,    // 距上边距离
                    x2: 0,    // 距右边距离
                    y2: 30,    // 距下边距离
                    borderWidth: 1
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['8月', '9月', '10月'],
                        axisTick: {            // 坐标轴小标记
                            show: false,       // 属性show控制显示与否，默认不显示
                        },
                        axisLine: {            // 坐标轴线
                            show: false,        // 默认显示，属性show控制显示与否
                        },
                        splitLine: {           // 分隔线
                            show: false,        // 默认显示，属性show控制显示与否
                        },
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value} 万'
                        },
                        axisLine: {            // 坐标轴线
                            show: true,        // 默认显示，属性show控制显示与否
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: '#f5f5f5',
                                width: 1,
                                type: 'solid'
                            }
                        },
                        splitLine: {           // 分隔线
                            show: true,        // 默认显示，属性show控制显示与否
                            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                color: ['#f5f5f5'],
                                width: 1,
                                type: 'solid'
                            }
                        },
                    }
                ],
                series: [{
                    name: '库存总额',
                    type: 'bar',
                    data: [231, 386, 103],
                    barWidth: 62,
                    itemStyle: {
                        normal: {
                            color: '#00aaeb',
                            label: {
                                show: true,
                                position: 'top',
                                formatter: '{c}万'
                            }
                        },
                    },
                }]
            };
            myChart4.setOption(option);
        })
    </script>
</body>

</html>